﻿
@{
    ViewData["Title"] = "query_list";
}
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="~/css/table.css" rel="stylesheet" />
    <style type="text/css">
        .style3 {
            color: #0000CC
        }

        td {
            text-align: center
        }
    </style>
</head>

<div id="app">
    <table width="100%">
        <tr>
            <td style="text-align:left;">
                <font color="black">您正在做的业务是:人力资源管理--薪酬发放管理--薪酬发放查询</font>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                <input id="salaryID" value="@ViewData["salaryID"]" hidden="hidden" />
                <input id="ke" value="@ViewData["ke"]" hidden="hidden" />
                <input id="startTime" value="@ViewData["startTime"]" hidden="hidden" />
                <input id="endTime" value="@ViewData["endTime"]" hidden="hidden" />
            </td>
        </tr>
    </table>
    <table width="100%" border="1" cellpadding=0 cellspacing=1
           bordercolorlight=#848284 bordercolordark=#eeeeee
           class="TABLE_STYLE1">
        <tr>
            <td width="20%" class="TD_STYLE1">
                <span>薪酬编号</span>
            </td>
            <td width="15%" class="TD_STYLE1">
                <span>I级机构名称</span>
            </td>
            <td width="15%" class="TD_STYLE1">
                <span>II级机构名称</span>
            </td>
            <td width="15%" class="TD_STYLE1">
                <span>III级机构名称</span>
            </td>
            <td width="10%" class="TD_STYLE1">
                <span>人数</span>
            </td>
            <td width="20%" class="TD_STYLE1">
                基本薪酬总额(元)
            </td>
        </tr>
        <tr class="TD_STYLE2" v-for="(item,index) in dt" :Key="index">
            <td>
                {{item.salary_grant_id}}
            </td>
            <td>
                {{item.first_kind_name}}
            </td>
            <td>
                {{item.second_kind_name}}
            </td>
            <td>
                {{item.third_kind_name}}
            </td>
            <td>
                {{item.human_amount}}
            </td>
            <td>
                {{item.salary_standard_sum}}
            </td>
        </tr>
    </table>
    <div align="center" style="font-size: 18px;color: gray">
        &nbsp;&nbsp;总数：
        <font style="color: maroon;font-weight: bold;">{{rows}}</font>
        例
        &nbsp;&nbsp;&nbsp;
        每页显示 <font style="color: maroon;font-weight: bold;">{{pageSize}}</font>
        条
        &nbsp;&nbsp;&nbsp;
        当前第 <font style="color: maroon;font-weight: bold;">{{currentPage}}</font>
        页
        &nbsp;&nbsp;&nbsp;共
        <font style="color: maroon;font-weight: bold;">{{pages}}</font>
        页
        <a style="color: navy;font-weight: bold" v-on:click="first()">首页</a>

        <a style="color: navy;font-weight: bold"
           v-on:click="prev()">上一页</a>

        <a style="color: navy;font-weight: bold"
           v-on:click="next()">下一页</a>

        <a style="color: navy;font-weight: bold"
           v-on:click="last()">末页</a>
        &nbsp;&nbsp;&nbsp;跳到第
        <input id=page type=text v-model="tpage" class=input1 size=1>
        页&nbsp;&nbsp;
        <input type="image" v-on:click="tiao()" src="~/images/go.bmp" width=18 height=18 border=0>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            dt: [],
            rows: 0,
            pages: 0,
            currentPage: 1,
            pageSize: 3,
            tpage: 1
        },
        methods: {
            load: function () {
                var t = this;
                var id = $("#salaryID").val();
                var ke = $("#ke").val();
                var stime = $("#startTime").val();
                var etime = $("#endTime").val();
                $.ajax({
                    url: "/salaryGrant/query_list",
                    type: "post",
                    data: { "currentpage": t.currentPage, "salaryID": id, "ke": ke, "startTime": stime, "endTime": etime },
                    //data:"currentpage="+t.currentPage+"&salaryID="+id+"&ke="+ke+"&startTime="+stime+"&endTime="+etime,
                    success: function (msg) {
                        var d = eval(msg);
                        t.dt = d["list"];
                        t.rows = d["rows"];
                        t.pages = d["pages"];
                    }
                });
            },
            //首页
            first: function () {
                this.currentPage = 1;
                this.load();
            },
            //下一页
            next: function () {
                if (this.currentPage < this.pages) {
                    this.currentPage++;
                } else {
                    this.currentPage = this.pages;
                }
                this.load();
            },
            //上一页
            prev: function () {
                if (this.currentPage > 1) {
                    this.currentPage--;
                } else {
                    this.currentPage = 1;
                }
                this.load();
            },
            //尾页
            last: function () {
                this.currentPage = this.pages;
                this.load();
            },
            //跳转
            tiao: function () {
                var tiao = $("#page").val();
                if (tiao > 0 && tiao <= this.pages) {
                    this.currentPage = tiao;
                    this.load();
                } else {
                    this.currentPage = 1;
                    this.load();
                    alert("不好意思，该页面不存在(自动跳首页)");
                }

            },

        },
        mounted: function () {
            this.load();
        }
    });
</script>





